<template>
  <dw-page-warpper>
    <DragCol ref="dragColRef" height="100%" width="100%" :leftPercent="20" :sliderWidth="8" sliderBgColor="#e6ecf5" sliderBgHoverColor="#e6ecf5">
      <template #left>
        <shell-script-category @currentNodeChange="currentNodeChange"></shell-script-category>
      </template>
      <template #right>
        <shell-script-grid ref="shellScriptGridRef" @handleSelect="handleSelect"></shell-script-grid>
      </template>
    </DragCol>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { DragCol } from '@/components/vue-resizer';
import { ref } from 'vue';
import type { IShellScriptCategory } from './shell-script.d';
import ShellScriptGrid from './components/shell-script-grid.vue';
import ShellScriptCategory from './components/shell-script-category.vue';
defineOptions({
  name: 'SysDict',
});

const shellScriptGridRef = ref();
const currentNodeChange = (nodeData: IShellScriptCategory, isEdit: boolean) => {
  if (isEdit) {
    shellScriptGridRef.value.setCategoryId(nodeData.id);
  } else {
    shellScriptGridRef.value.loadData(nodeData.id);
  }
};
const dragColRef = ref();
const handleSelect = (newValue: string) => {
  if (newValue != 'datagrid') {
    dragColRef.value.hiddenLeft();
  } else {
    dragColRef.value.showLeft();
  }
};
</script>

<style lang="scss" scoped></style>
